<template>
  <view v-if="color" class="mxp-line" :style="[lineStyle, cusStyle]" :class="[cusClass]"></view>
</template>

<script lang="ts" setup>
  import { type CSSProperties, computed } from 'vue';
  import type { $AllColorStr, $SizeUnitArr4Str, $SizeUnitStr } from '@/mxp-ui/mxp-tool/types/interface';
  import { defThemeColor } from '../mxp-tool/theme/theme';

  export type $LinProps = {
    /** 颜色 */
    color?: $AllColorStr | boolean | 'transparent';
    /** 长度，竖向时表现为高度，横向时表现为长度，可以为百分比，带px单位的值等 */
    length?: $SizeUnitStr;
    /** 线条方向，col-竖向，row-横向 */
    direction?: 'col' | 'row';
    /** 是否显示细边框 */
    hairline?: boolean;
    /** 线条与上下左右元素的间距，字符串形式，如"30px"、"20px 30px" */
    margin?: $SizeUnitArr4Str;
    /** 是否虚线，true-虚线，false-实线 */
    dashed?: boolean;
    /** 自定义的样式属性 */
    cusStyle?: CSSProperties;
    /** 自定义类名 */
    cusClass?: string;
  };

  defineOptions({
    name: 'mxp-line',
  });

  const props = withDefaults(defineProps<$LinProps>(), {
    color: true,
    length: undefined,
    direction: 'row',
    hairline: true,
    margin: '0px',
    dashed: false,
    cusStyle: () => ({}),
    cusClass: '',
  });

  const lineStyle = computed(() => {
    const style: CSSProperties = {};
    style.margin = props.margin;
    // 如果是水平线条，边框高度为1px，再通过transform缩小一半，就是0.5px了
    if (props.direction === 'row') {
      if (props.color) {
        style.borderBottomWidth = '1px';
        style.borderBottomStyle = props.dashed ? 'dashed' : 'solid';
        style.borderBottomColor = props.color === true ? defThemeColor.value.border : props.color;
      }
      if (props.length) {
        style.width = props.length;
      }
      if (props.hairline) {
        style.transform = 'scaleY(0.5)';
      }
    } else {
      if (props.color) {
        style.borderLeftWidth = '1px';
        style.borderLeftStyle = props.dashed ? 'dashed' : 'solid';
        style.borderLeftColor = props.color === true ? defThemeColor.value.border : props.color;
      }
      if (props.length) {
        style.height = props.length;
      }
      if (props.hairline) {
        style.transform = 'scaleX(0.5)';
      }
    }
    return style;
  });
</script>

<style lang="scss" scoped>
  .mxp-line {
    display: flex;
    align-items: stretch;
    justify-content: center;
  }
</style>
